<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单设置</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>

</head>
<body>


<div id="app">

    <el-tree
            :data="menuTree"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{node,data }">
          <span>{{node.label}}</span>
                  <i class=" el-icon-edit" @click="handleUpdate(node)"></i>
                  <i class=" el-icon-delete" @click="delete1(node)"></i>

      </span>
    </el-tree>


    <div class="add-form">
        <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible4Edit">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="基本信息" name="first">
                    <el-form ref="dataAddForm" :model="formData" label-position="right"
                             label-width="100px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="name" prop="name">
                                    <el-input v-model="formData.name"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="访问路径" prop="linkUrl">
                                    <el-input v-model="formData.linkUrl"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="路由路径">
                                    <el-input v-model="formData.path"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="优先级">
                                    <el-input v-model="formData.age"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="描述">
                                    <el-input v-model="formData.description"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">

                                <el-form-item label="图标">
                                    <el-input v-model="formData.icon"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="父菜单">
                                    <el-select v-model="formData.parentMenuId" placeholder="请选择父菜单">
                                        <el-option v-for="item in parentMenu"
                                                   :key="item.id"
                                                   :label="item.name"
                                                   :value="item.id"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>

                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="子菜单信息" name="second">

                    <div class="checkScrol">
                        <table class="datatable">
                            <thead>
                            <tr>
                                <th>选择</th>

                                <th>菜单名称</th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="c in tableData">
                                <td>
                                    <input :id="c.id" v-model="childIds" type="checkbox" :value="c.id">
                                </td>

                                <td><label :for="c.id">{{c.name}}</label></td>

                            </tr>
                            </tbody>
                        </table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="角色信息" name="role">

                    <div class="checkScrol">
                        <table class="datatable">
                            <thead>
                            <tr>
                                <th>选择</th>

                                <th>角色名称</th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="c in roleData">
                                <td>
                                    <input :id="c.id" v-model="roleIds" type="checkbox" :value="c.id">
                                </td>

                                <td><label :for="c.id">{{c.name}}</label></td>

                            </tr>
                            </tbody>
                        </table>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                <el-button type="primary" @click="edit()">确定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            roleData:[],
            roleIds:[],
            menuTree: [],
            formData: {},
            childIds: [],
            tableData: [],//新增和编辑表单中对应的子菜单项列表数据
            dialogFormVisible4Edit: false,//控制编辑窗口显示/隐藏
            activeName: "",
            parentMenu: []
        },
        created() {
          this.findPage();
        },
        methods: {

            findPage(){
                axios.get("/menu/getMenu.do").then((res) => {
                    console.log(res);
                    this.menuTree = res.data.data;
                    console.log(this.menuTree);
                })
            },
            //编辑事件
            edit() {
                var formData = this.formData;
                console.log(formData);
                console.log(this.childIds);
                console.log(this.roleIds);

                axios.post("/menu/edit.do?childIds="+this.childIds+"&roleIds="+this.roleIds,this.formData).then((res)=>{
                    this.dialogFormVisible4Edit=false
                    if (res.data.flag) {
                        this.$message({
                            message:res.data.message,
                            type:'success'
                        })
                    }else {
                        this.$message.error(res.data.message)
                    }
                }).finally(()=>{
                    this.findPage();
                })
            },
            // 弹出编辑窗口
            handleUpdate(node) {

                var id = node.data.id;
                axios.post("/menu/getMenuById.do?id=" + id).then((res) => {
                    console.log(res);
                    this.formData = res.data.data.menu;
                    this.tableData = res.data.data.menus;
                    this.childIds = res.data.data.childIds;
                    this.parentMenu = res.data.data.parentMenu;
                    this.roleData=res.data.data.roles;
                    this.roleIds=res.data.data.roleIds;
                    console.log(this.roleIds,this.childIds)



                })
                this.activeName = 'first';
                this.dialogFormVisible4Edit = true;
            },
            //删除按钮
            delete1(node) {

                this.$confirm("确定删除吗?", "提示", {type: 'warining'}).then(() => {
                    // alert('用户点击的是确定')
                    axios.get("/menu/delete.do?id=" + node.data.id).then((response) => {
                        //从返回值结果中拿到是否删除成功的flag
                        if (response.data.flag) {
                            //删除成功
                            this.$message({
                                message: response.data.message,
                                type: 'success'
                            })
                        } else {
                            //删除失败
                            this.$message.error(response.data.message);
                        };
                        this.findPage();
                    }).catch((r) => {
                        this.showMessage(r);
                    });
                });
            }
        }
    })
</script>

</html>